<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { pageQueryMe } from '@/api/express'
import type { ExpressTakeReq, ExpressTake } from '@/api/express/type'
import type { BaseResponse, ResultType } from '@/api/base'
import type { ExpressType } from '@/api/config/type'
import { toast } from '@/utils/common'
import { reqExpressType, getDeliveryTime, getSexLimit } from './common'

const expressList = ref<ExpressTake[]>([])
const expressReq = ref<ExpressTakeReq>({
  pageNum: 1,
  pageSize: 10
})
let expressTypeVal = ref<ResultType[]>([])
const loadStatus = ref<string>('loadmore')
const moreStatus = ref<boolean>(true)

const loadExpressList = async () => {
  loadStatus.value = 'loading'
  try {
    const res: BaseResponse = await pageQueryMe(expressReq.value)
    if (expressReq.value.pageNum == 1 && res.data.records.length < expressReq.value.pageSize) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      expressList.value = expressList.value.concat(res.data.records)
      expressReq.value.total = res.data.total
      return
    }
    if (!res.data || res.data.records.length == 0 || res.data.total < expressList.value.length) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      return
    }
    expressList.value = expressList.value.concat(res.data.records)
    loadStatus.value = 'loadmore'
    expressReq.value.pageNum++
  } catch (error: any) {
    loadStatus.value = 'nomore'
    moreStatus.value = false
    toast(error.tips)
  }
}

const loadExpressType = async () => {
  const res: ExpressType[] = await reqExpressType()
  expressTypeVal.value = res.map((item: ExpressType) => {
    return {
      label: item.name,
      value: item.type
    }
  })
}

onLoad(async () => {
  await loadExpressType()
  loadExpressList()
})

onReachBottom(() => {
  // 如果依然还有数据，就触发
  if (moreStatus.value == true) {
    loadStatus.value = 'loading'
    setTimeout(() => {
      loadExpressList()
      loadStatus.value = 'loadmore'
    }, 500)
  }
})

const jumpToDetail = (item: ExpressTake) => {
  uni.navigateTo({
    url: `/pages/express/detailMe?id=${item.id}`
  })
}

const publish = () => {
  uni.navigateTo({
    url: '/pages/express/create'
  })
}
</script>

<template>
  <view class="express">
    <view class="express-list">
      <view class="express-item" v-for="(item, index) in expressList" :key="index">
        <user-info :data="item"></user-info>
        <view class="express-item-content" @click="jumpToDetail(item)">
          <view class="express-item-content-info">
            <view class="express-item-content-item">
              快递数量：{{ item.amount }}个
            </view>
            <view class="express-item-content-item">
              送达时间：{{ getDeliveryTime()[item.deliveryTime] }}
            </view>
            <view class="express-item-content-item">
              性别限制：{{ getSexLimit()[item.sexLimit] }}
            </view>
            <view class="express-item-content-item" v-if="item.remark">
              <uv-text :lines="1" :text="'备注：' + item.remark" color="#999"></uv-text>
            </view>
          </view>
          <view class="express-item-address">
            <uv-steps current="1" direction="column">
              <uv-steps-item :title="item.expressStationStr" class="start" iconSize="50px">
                <template #icon>
                  <view class="start-icon">
                    起
                  </view>
                </template>
              </uv-steps-item>
              <uv-steps-item :title="item.address.building" class="end">
                <template #icon>
                  <view class="end-icon">终</view>
                </template>
              </uv-steps-item>
            </uv-steps>
          </view>
        </view>
        <view class="express-item-price">
          ￥{{ item.price }}
        </view>
      </view>
      <view style="background-color: #fff;">
        <uv-load-more bgColor="#fff" :status="loadStatus" @loadmore="loadExpressList"></uv-load-more>
      </view>
    </view>
    <view class="publish">
      <uv-avatar icon="plus" size="100rpx" fontSize="52rpx" bg-color="#409eff" color="#fff"
        @click="publish"></uv-avatar>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.express-list {
  display: flex;
  background-color: #fff;
  flex-direction: column;

  .express-item {
    display: flex;
    flex-direction: column;
    padding: 20rpx;

    .express-item-content {
      display: flex;
      margin-top: 20rpx;
      justify-content: space-between;

      .express-item-content-info {
        font-size: 28rpx;
        color: #999;
        width: calc(50% - 20rpx);
        line-height: 40rpx;

        .express-item-content-item {
          font-size: 28rpx;
          color: #999;
          line-height: 40rpx;
        }
      }

      .express-item-address {
        font-size: 28rpx;
        color: #999;
        line-height: 40rpx;
        width: calc(50% - 20rpx);

        .start {
          ::v-deep .uv-text__value {
            :first-child {
              font-size: 28rpx;
              color: #4fbe33;
            }
          }
        }

        .end {
          ::v-deep.uv-text__value {
            :first-child {
              font-size: 28rpx;
              color: #3c9cff;
            }
          }
        }

        .start-icon {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #4fbe33;
          color: #fff;
          text-align: center;
          line-height: 20px;
          font-size: 14px;
        }

        .end-icon {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #3c9cff;
          color: #fff;
          text-align: center;
          line-height: 20px;
          font-size: 14px;
        }
      }
    }

    .express-item-price {
      color: #ff7744;
      text-align: right;
    }
  }
}

.publish {
  position: fixed;
  bottom: 100rpx;
  right: 30rpx;
}
</style>
